import { taskStatus, taskType, timeFiledType } from '@/codelist';
import axios from 'axios';
import { Options, Vue } from 'vue-class-component';
import './searchform.less';

@Options({})
export class SearchForm extends Vue {
    /**
     * 表单数据
     *
     * @type {FormData}
     * @memberof SearchForm
     */
    formData: any = {
        configId: null,
        tableName: null,
        timeType: null,
        status: null,
        type: null,
        description: null,
    };

    /**
     * 控件布局
     *
     * @type {*}
     * @memberof SearchForm
     */
    wrapperCol: any = { span: 5 };

    /**
     * 标签布局
     *
     * @type {*}
     * @memberof SearchForm
     */
    labelCol: any = { span: 4 };

    /**
     * 代码表
     *
     * @type {*}
     * @memberof SearchForm
     */
    codelists: any = {};

    /**
     * Vue生命周期，实例创建完成
     *
     * @memberof SearchForm
     */
    async created() {
        await this.loadCodeList();
        window.addEventListener('keydown', this.keyDown);
    }

    keyDown (e:any) {
        if (e.keyCode === 13) {
            this.onSearch();
        }
    }

    /**
     * 加载代码表
     *
     * @memberof SearchForm
     */
    async loadCodeList() {
        const params = { pageSize: 5000, pageNo: 1 };
        await axios
            .get('/api/1/database/config/1/page', {
                params,
            })
            .then(res => {
                if (res && res.status === 200) {
                    const data = res.data;
                    if (data.code === 1) {
                        data.data.data.forEach((item: any) => {
                            item.key = item.id;
                            item.value = item.name;
                        });
                        this.codelists.config = data.data.data;
                    }
                }
            })
            .catch(err => {
                console.log(err);
            });
    }

    /**
     * 表单信息
     *
     * @type {any[]}
     * @memberof SearchForm
     */
    formDetails: any[] = [
        {
            prop: 'configId',
            label: '配置Id',
            type: 'selectConfig',
            codelistName: 'config',
        },
        {
            prop: 'tableName',
            label: '表名',
            type: 'text',
        },
        {
            prop: 'timeType',
            label: '时间类型',
            codelist: timeFiledType,
            type: 'select',
        },
        {
            prop: 'status',
            label: '有效状态',
            codelist: taskStatus,
            type: 'select',
        },
        {
            prop: 'type',
            label: '任务类型',
            codelist: taskType,
            type: 'select',
        },
        {
            prop: 'description',
            label: '描述',
            type: 'text',
        },
    ];

    /**
     * 绘制搜索表单项
     *
     * @param {*} item
     * @return {*}
     * @memberof SearchForm
     */
    renderFormItem(item: any) {
        switch (item.type) {
            case 'text':
                return this.renderInput(item);
            case 'textarea':
                return this.renderInput(item);
            case 'number':
                return this.renderInput(item);
            case 'select':
                return this.renderSelect(item);
            case 'selectConfig':
                return this.renderSelectConfig(item);
            default:
                return this.renderInput(item);
        }
    }

    /**
     * 绘制输入框
     *
     * @param {*} item
     * @return {*}
     * @memberof SearchForm
     */
    renderInput(item: any) {
        return <el-input v-model={this.formData[item.prop]} placeholder={`${item.label}`} type={item.type} />;
    }

    /**
     * 绘制选择器
     *
     * @param {*} item
     * @memberof SearchForm
     */
    renderSelectConfig(item: any) {
        return (
            <el-select clearable v-model={this.formData[item.prop]} placeholder={item.label}>
                {(item.codelistName && this.codelists[item.codelistName])
                    ? this.codelists[item.codelistName].map((listItem: any) => {
                        return <el-option key={listItem.key} value={listItem.key} label={listItem.value}></el-option>;
                    })
                    : null}
            </el-select>
        );
    }

    renderSelect(item: any) {
        return (
            <el-select clearable v-model={this.formData[item.prop]} placeholder={item.label}>
                {item.codelist
                    ? item.codelist.map((listItem: any) => {
                        return <el-option key={listItem.key} value={listItem.key} label={listItem.value}></el-option>;
                    })
                    : null}
            </el-select>
        );
    }

    /**
     * 搜索
     *
     * @memberof SearchForm
     */
    onSearch() {
        this.$emit('search', this.formData);
    }

    render() {
        return (
            <div class='searchform'>
                <div class='action-bar'>
                    <a-button size='small' type='primary' onClick={this.onSearch}>
                        搜索
                    </a-button>
                </div>
                <a-row>
                    {this.formDetails.map((item: any) => {
                        return (
                            <a-col span={8}>
                                <div class='form-item'>{this.renderFormItem(item)}</div>
                            </a-col>
                        );
                    })}
                </a-row>
            </div>
        );
    }
}
